<template>
  <div class="commission">
    <dt-header :title="title" :line-number="3" ref="header">
      <Button type="primary" @click="onExport">导出Excel</Button>
    </dt-header>

    <dt-grid ref="table" :columns="columns" :list="list" @filter="onFilter" />
  </div>
</template>

<script>
  import columnOpt from './opt/room.js'
  import detailOpt from './opt/detail.js'
  import initiateMgr from '@/biz/commission/initiate.js'

  export default {
    components: {},
    data() {
      return {
        commissionId: null,
        filterInfo: {},
        columns: [],
        list: [],
        title: '',
        info: null
      }
    },
    mounted() {
      this.commissionId = this.$route.query.commissionId

      this.getList()
      this.list = []
    },
    methods: {
      onFilter(data) {
        this.filterInfo = { ...data }
        this.getList()
      },
      onExport() {
        initiateMgr.exportInfo({
          type: 1,
          commissionId: this.commissionId,
          ...this.filterInfo
        })
      },
      getList() {
        let data = {
          type: 1,
          commissionId: this.commissionId,
          ...this.filterInfo
        }
        initiateMgr
          .detail(data)
          .then((res) => {
            this.columns = columnOpt.options(res, 2)
            this.title =
              res.commissionName +
              ` (${res.commissionMonth} ${this.$dt.dictInfo().__value('settlementType', res.settlementType)})`
            this.list = res.settlementDetails
            this.info = res
            this.$refs.header.init(detailOpt.options(this), this.info)
          })
          .catch((err) => {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }
</style>
